<!-- cs -->
<template>
  <div class="pages">
    <div class="topbg">
      <img src="@/assets/img/gm/top-bg.png" class="img1" />
      <img src="@/assets/img/gm/pm.png" class="img2" />
    </div>
    <!-- 奖励内容 -->
    <div class="sign-box">
      <div class="box-border">
        <div class="content">
          <div class="title">
            {{ month }}月已累计签到<span> {{ total }} </span>天
          </div>
          <!-- 奖励列表 -->
          <div class="month-award">
            <!-- 单个奖品 -->
            <div
              v-for="(item, index) in list"
              :key="index"
              class="award-item"
              :class="{ active: today == 0 && index == total }"
              @click="signFun(today == 0 && index == total)"
            >
              <!-- 待领取 -->
              <img
                v-if="today == 0 && index == total"
                src=""
                alt=""
                class="badge"
              />
              <!-- 已领取 -->
              <div class="ylq" v-if="index < total"></div>
              <img
                v-if="index < total"
                src=""
                class="ylqimg"
              />
              <!-- 已领取结束 -->
              <img :src="item.img" alt="" class="img" />
              <span class="cnt">X{{ item.num }}</span>
              <span class="day">第{{ index + 1 }}天</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import SignApi from '@/api/sign'
export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'sign1-gm',
  components: {},
  data() {
    //这里存放数据
    return {
      month: '6',
      list: [],
      total: 0,
      today: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    setMonth() {
      var date = new Date()
      this.month = date.getMonth() + 1
    },
    async getData() {
      const res = await SignApi.list()
      if (res && res.code == 200) {
        this.list = res.data.list
        this.today = res.data.today
        this.total = res.data.total
      }
    },
    async signFun(ok) {
      if (!ok) {
        return
      }
      const res = await SignApi.sign()
      if (res && res.code == 200) {
        this.today = 1
        this.total += 1
        this.$toast.success(res.data)
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.setMonth()
    this.getData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.pages {
  // min-height: calc(100vh - 95px - 72px);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#4665a0),
    to(#567faf)
  );
  background: -webkit-linear-gradient(top, #5780b0, #567faf);
  background: -o-linear-gradient(top, #5780b0 0, #567faf 100%);
  background: linear-gradient(180deg, #5780b0 0, #567faf);

  .topbg {
    width: 100%;
    height: 300px;
    position: relative;

    .img1 {
      width: 100%;
      height: 300px;
    }

    .img2 {
      width: 73.5px;
      height: 84.5px;
      position: absolute;
      top: 38px;
      left: 34px;
    }
  }

  .sign-box {
    position: relative;
    top: -180px;
    width: 100%;
    padding: 0px 12px 50px 12px;

    .box-border {
      background: url()
          no-repeat left top 0/100%,
        url()
          no-repeat left bottom 0/100%;
      padding: 0.19rem 0 0.23rem;

      .content {
        background: url()
          repeat 50%/100%;

        .title {
          height: 31.5px;
          padding: 12px 21px 0;
          margin-bottom: 22.5px;
          font-size: 15px;
          color: #8e816a;
          font-weight: 700;
          line-height: 1;

          span {
            font-size: 18px;
            color: #c6894d;
          }
        }
        .month-award {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          padding: 0 21px;
        }
        .award-item {
          width: 71px;
          height: 96px;
          background-image: url();
          background-size: 100% 100%;
          position: relative;

          .img {
            position: absolute;
            width: 47.5px;
            height: 47.5px;
            top: 10px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
          }

          .badge {
            position: absolute;
            width: 30.5px;
            height: 30.5px;
            right: -12.5px;
            top: -12.5px;
            z-index: 1;
          }

          .cnt {
            position: absolute;
            font-size: 12px;
            color: #fffdf0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            bottom: 26px;
            line-height: 8px;
          }

          .day {
            position: absolute;
            font-size: 14px;
            line-height: 1;
            color: #b8ab93;
            bottom: 4.5px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            white-space: nowrap;
            font-weight: 800;
          }

          .ylq {
            position: absolute;
            top: 0;
            width: 71px;
            height: 74px;
            background-color: #ffffff;
            opacity: 0.3;
            z-index: 5;
          }
          .ylqimg {
            width: 40px;
            height: 40px;
            z-index: 5;
            position: relative;
            left: 15px;
            top: 15px;
          }
        }

        .award-item:not(:nth-child(4n)) {
          margin: 0 8px 9px 0;
        }

        .active {
          position: relative;
          background: none;
          z-index: 3;
        }

        .active:before {
          content: '';
          position: absolute;
          top: -4px;
          left: -8px;
          background: url(https://webstatic.mihoyo.com/bbs/event/signin-ys/images/award_active.4f4e42d9.png)
            no-repeat 50%/100%;
          width: 87px;
          height: 112px;
        }
      }
    }
  }
}
</style>
